<template>
    <div class="container">
        <!-- div left -->
        <div class="left">
            <!-- 折叠按钮-->
            <div @click="toggleCollapse()">
                <el-icon size="24" v-show="!isMenuOpen"><Fold /></el-icon>
                <el-icon size="24" v-show="isMenuOpen"><Expand /></el-icon>
            </div>
            <!-- 面包屑 -->
            <div>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <template v-for="(item, index) in breadList">
                    <el-breadcrumb-item
                        v-if="item.name"
                        :key="index"
                        :to="item.path"
                    >{{ item.meta.title }}</el-breadcrumb-item>
                    </template>
                </el-breadcrumb>
            </div>
        </div>
        <!-- div right -->
        <div class="right">
            <div>
                <span >账号：{{userData.loginName}}</span>
            </div>
            <div>
                <el-avatar> {{userData.name}} </el-avatar>
            </div>
            <div>
                <el-dropdown>
                <el-icon size="24"><MoreFilled /></el-icon>
                <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item>
                        <el-icon><UserFilled /></el-icon>个人信息
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <el-icon><EditPen /></el-icon>修改密码
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <el-icon><ArrowLeft /></el-icon>退出登录
                    </el-dropdown-item>
                </el-dropdown-menu>
                </template>
            </el-dropdown>
            </div>
        </div>
    </div>
</template>

<script setup>
    import {
        Fold,
        Expand,
        MoreFilled,
        EditPen,
        ArrowLeft,
        UserFilled
    } from '@element-plus/icons-vue'
    import {ref, defineEmits, watch} from 'vue'

    // 面包屑
    import { useRouter,useRoute } from 'vue-router'

    let router = useRouter()
    let route = useRoute()

    let breadList = ref()
    let getMatched=()=>{
        console.log("route.matched:",route.matched);
        console
        breadList.value = route.matched.filter(item => item.meta && item.meta.title);
    }
    getMatched()
    
    watch(() => route.path, (newValue, oldValue) => { //监听路由路径是否发生变化，之后更改面包屑
        console.log("======")
        breadList.value = route.matched.filter(item => 
            item.meta && item.meta.title
    );
        console.log("breadList.value", breadList.value)
    })



    import useUserInfoStore from '@/stores/userInfo.js'
    const userInfoStore = useUserInfoStore();

    // 用户数据模型
    let userData = ref({
        id: '',
        name: '',
        loginName: ''
    })


    import {currentUsermainService} from '@/api/user.js'
    // 获取登录用户信息
    const getUser = async () => {
        let result = await currentUsermainService()
        // console.log(result)
        userData.value = result.data;
        userInfoStore.setInfo(result.data)
        // console.log("userData:",userData)
    }
    getUser()


    // 折叠按钮处理
    const emits = defineEmits(["parentClick"])
    const isMenuOpen = ref(false)
    const toggleCollapse = () => {
        isMenuOpen.value = !isMenuOpen.value
        console.log(isMenuOpen.value)
        emits("parentClick", isMenuOpen.value)
    }


</script>

<style lang="scss" scope>
    .container {  
        overflow: auto; /* 清除浮动影响 */  
        height: 48px;
        padding: 10px; /* 内边距 */  
        border-bottom: 2px solid; /* 设置下边框宽度和样式 */  
        border-bottom-color: #F5F5F5; /* 设置下边框颜色为红色 */  
        background-color: #FFFFFF;   
    }  
    
    .left {  
        height: 48px;
        float: left;   
        display: flex;
        align-items: center; /* 垂直居中子项 */  
        justify-content: center; /* 水平居中子项（如果需要）*/ 
    }  

    .left > div {  
        padding-right: 10px; /* 设置直接子元素的 padding */  
    }
    
    .right {  
        float: right; 
        display: flex; 
        align-items: center; /* 垂直居中子项 */  
        justify-content: center; /* 水平居中子项（如果需要）*/   
    }
    .right > div {  
        padding-right: 10px; /* 设置直接子元素的 padding */  
    }
</style>
